<template>
  <div class="commentsBox">
    <van-nav-bar title="活动分享" left-text="" left-arrow> </van-nav-bar>

    <div class="main">
      <div class="main_top">
        <div class="up">
          <van-row type="flex">
            <van-col span="4" style="text-align: right">
              <van-image
                round
                cover
                src="https://img01.yzcdn.cn/vant/cat.jpeg"
              />
            </van-col>

            <van-col span="17">
              <div class="word">
                <p>海洋里的小虾米</p>
                <p>2021-12-10 15:44</p>
              </div>
            </van-col>

            <van-col span="3">
              <van-button type="primary" size="mini">删除</van-button>
            </van-col>
          </van-row>
        </div>

        <div class="center">
          <van-divider />
          <van-row type="flex">
            <van-col span="4"></van-col>
            <van-col span="19">
              <p>
                分享内容：我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
              </p>
            </van-col>
            <van-col span="1"></van-col>
          </van-row>
        </div>

        <div class="down">
          <van-row type="flex" class="left">
            <van-col span="1"></van-col>
            <van-col span="23">
              <div>
                <span><van-icon name="eye" /></span>
                <span><van-icon name="good-job" /></span>
                <span><van-icon name="comment" /></span>
              </div>
            </van-col>
          </van-row>

          <van-divider />
        </div>
      </div>

      <div class="main_bottom">
        <div class="bottom_main">
          <van-row type="flex">
            <van-col span="4" style="text-align: right">
              <van-image
                round
                cover
                src="https://img01.yzcdn.cn/vant/cat.jpeg"
              />
            </van-col>
            <van-col span="17">
              <div class="word">
                <p>海洋里的小虾米</p>
                <p>2021-12-10 15:44</p>
              </div>
            </van-col>
          </van-row>
          <van-divider />
          <div style="margin-left: 112.5px; margin-top: 15.625px">
            <p>二级评论不超过50字</p>
          </div>
        </div>

        <div class="bottom_main">
          <van-row type="flex">
            <van-col span="4" style="text-align: right">
              <van-image
                round
                cover
                width="50px"
                height="50px"
                src="https://img01.yzcdn.cn/vant/cat.jpeg"
              />
            </van-col>
            <van-col span="17">
              <div class="word">
                <p>海洋里的小虾米</p>
                <p>2021-12-10 15:44</p>
              </div>
            </van-col>
          </van-row>
          <van-divider />
          <div style="margin-left: 112.5px; margin-top: 15.625px">
            <p>二级评论不超过50字</p>
          </div>
        </div>
      </div>
    </div>

    <van-tabbar>
      <van-field center autosize clearable placeholder="请输入内容">
        <template #button>
          <van-button size="small" type="primary">评论</van-button>
        </template>
      </van-field>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: "",
    };
  },
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  p {
    line-height: 30px;
    font-size: 15.625px;
    text-align: left;
  }
}

.commentsBox {
  .main {
    .main_top {
      .up {
        .van-button--primary {
          margin-top: 25px;
          color: #333;
          background: #fff;
          border: none;
        }
        .word {
          margin-left: 18.75px;
        }
      }
      .center {
        .van-divider {
          margin: 0;
          background-color: #999;
        }
        text-align: left;
      }
      .down {
        margin-top: 20px;
        .left {
          text-align: left;
          margin-top: 15.625px;
          span {
            display: inline-block;
            margin: 15.625px;
          }
        }
        .van-divider {
          margin: 0;
          background-color: #999;
        }
      }
    }
    .main_bottom {
      height: 330px;
      .bottom_main {
        margin-top: 15.625px;
        .word {
          margin-left: 18.75px;
        }
        .van-divider {
          margin: 0;
          background-color: #999;
        }
      }
    }
  }
  .van-image{
    width: 50px;
    height: 50px;
  }
  .van-tabbar {
    width: 100%;
    height: 78.125px;
    .van-cell {
      background-color: #eee;
    }
    /deep/.van-field__control {
      border: rgba(153, 153, 153, 1) solid 1px;
    }
  }
}
</style>